<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";

defineOptions({
  name: "MarketingOrder"
});

const { t } = useI18n();
const router = useRouter();

const baseUrl: string =
  import.meta.env.VITE_BASE_URL || "http://localhost:8848/#"; // 推荐通过环境变量获取baseUrl

const getPath = (subPath: string) => (baseUrl ? baseUrl + subPath : subPath);

// 数据大屏卡片数据
const dashboards = ref([
  {
    id: 1,
    title: "NIKE品牌影响分析",
    image: "/src/assets/dataVImages/nike-view.png",
    description: "全方位分析耐克品牌在市场中的影响力指标",
    path: getPath("/marketing/NIKE")
  },
  {
    id: 2,
    title: "品牌曝光度分析",
    image: "/src/assets/dataVImages/品牌曝光量分析.png",
    description: "多渠道品牌曝光与传播效果分析",
    path: getPath("/marketing/exposure-analysis")
  },
  {
    id: 3,
    title: "蔚来品牌曝光监测",
    image: "/src/assets/dataVImages/蔚来曝光量分析.png",
    description: "实时监测品牌相关舆情与口碑数据",
    path: getPath("/marketing/nio-sale")
  },
  {
    id: 4,
    title: "品牌竞争力分析",
    image:
      "https://via.placeholder.com/400x250/f0f0f0/909399?text=品牌竞争力分析",
    description: "与竞品的品牌影响力对比分析",
    path: getPath("/marketing/medical-equipment")
  },
  {
    id: 5,
    title: "品牌资产价值评估",
    image:
      "https://via.placeholder.com/400x250/f0f0f0/909399?text=品牌资产价值评估",
    description: "多维度评估品牌资产价值",
    path: getPath("/marketing/retailShop")
  }
]);

// 品牌影响渠道分析数据
const channelData = ref({
  tooltip: {
    trigger: "item"
  },
  legend: {
    orient: "vertical",
    right: "0%",
    top: "middle"
  },
  series: [
    {
      name: "品牌影响渠道",
      type: "pie",
      radius: ["45%", "70%"],
      center: ["40%", "50%"],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 8,
        borderColor: "#fff",
        borderWidth: 2
      },
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true,
          fontSize: "14",
          fontWeight: "bold"
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: "社交媒体", itemStyle: { color: "#409EFF" } },
        { value: 735, name: "搜索引擎", itemStyle: { color: "#67C23A" } },
        { value: 580, name: "新闻媒体", itemStyle: { color: "#E6A23C" } },
        { value: 484, name: "行业活动", itemStyle: { color: "#F56C6C" } },
        { value: 300, name: "用户口碑", itemStyle: { color: "#909399" } }
      ]
    }
  ]
});

// 品牌传播趋势数据
const trendData = ref({
  tooltip: {
    trigger: "axis"
  },
  legend: {
    data: ["实际传播量", "预测传播量"],
    top: "0%"
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    top: "15%",
    containLabel: true
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月"]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      name: "实际传播量",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 3,
        color: "#409EFF"
      },
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(64, 158, 255, 0.4)"
            },
            {
              offset: 1,
              color: "rgba(64, 158, 255, 0.1)"
            }
          ]
        }
      },
      emphasis: {
        focus: "series"
      },
      data: [120, 132, 101, 134, 90, 230, 210, 182]
    },
    {
      name: "预测传播量",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 3,
        color: "#67C23A"
      },
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(103, 194, 58, 0.4)"
            },
            {
              offset: 1,
              color: "rgba(103, 194, 58, 0.1)"
            }
          ]
        }
      },
      emphasis: {
        focus: "series"
      },
      data: [220, 182, 191, 234, 290, 330, 310, 250]
    }
  ]
});

// 热门品牌关键词
const hotKeywords = ref([
  { keyword: "品质保证", count: 12458, status: "上升" },
  { keyword: "技术创新", count: 8972, status: "上升" },
  { keyword: "客户体验", count: 6584, status: "稳定" },
  { keyword: "品牌价值", count: 4521, status: "上升" },
  { keyword: "社会责任", count: 3268, status: "下降" }
]);

// 跳转到数据大屏
const navigateToDatascreen = path => {
  window.open(path);
};

// 复制URL到剪贴板
const copyUrl = url => {
  const fullUrl = `${url}`;
  navigator.clipboard
    .writeText(fullUrl)
    .then(() => {
      ElMessage({
        message: "链接已复制到剪贴板",
        type: "success",
        duration: 2000
      });
    })
    .catch(() => {
      ElMessage({
        message: "复制失败，请手动复制",
        type: "error",
        duration: 2000
      });
    });
};
</script>

<template>
  <div class="dashboard-container">
    <!-- 数据大屏卡片区 -->
    <el-row :gutter="50" class="dashboard-row">
      <el-col
        v-for="dashboard in dashboards"
        :key="dashboard.id"
        :span="12"
        class="dashboard-col"
      >
        <div class="dashboard-item">
          <div
            class="dashboard-card"
            @click="navigateToDatascreen(dashboard.path)"
          >
            <div class="dashboard-preview">
              <img
                :src="dashboard.image"
                :alt="dashboard.title"
                class="preview-image"
              />
              <div class="preview-overlay">
                <el-button type="primary">
                  <el-icon><i-ep-view /></el-icon>
                  查看大屏
                </el-button>
              </div>
            </div>
          </div>
          <h3 class="dashboard-title">{{ dashboard.title }}</h3>
          <div class="url-copy-container">
            <div class="url-input">
              <span>{{ dashboard.path }}</span>
            </div>
            <el-button
              class="copy-btn"
              type="primary"
              plain
              size="small"
              @click.stop="copyUrl(dashboard.path)"
            >
              <el-icon><CopyDocument /></el-icon>
            </el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.dashboard-container {
  min-height: calc(100vh - 120px);
  padding: 20px;
}

.dashboard-row {
  margin-bottom: 30px;
}

.dashboard-col {
  padding: 12px 40px;
  margin-bottom: 40px;
}

.dashboard-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dashboard-title {
  padding: 0 5px;
  margin: 12px 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: #2c2c2c;
}

.dashboard-card {
  display: flex;
  flex-direction: column;
  height: auto;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 0;
  border-radius: 10px;
  box-shadow: 0 4px 24px 0 rgb(0 0 0 / 12%);
  transition: all 0.3s;
}

.dashboard-card:hover {
  border-radius: 10px;
  box-shadow: 0 12px 32px 0 rgb(0 0 0 / 18%);
  transform: translateY(-5px);
}

.dashboard-preview {
  position: relative;
  width: 100%;
  padding: 0;

  /* 高度由图片决定 */
  overflow: hidden;
}

.preview-image {
  display: block;
  width: 100%;
  height: 430px; /* 统一固定高度 */
  margin: 0;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.3s;
}

.dashboard-card:hover .preview-image {
  transform: scale(1.05);
}

.preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 50%);
  opacity: 0;
  transition: opacity 0.3s;
}

.dashboard-card:hover .preview-overlay {
  opacity: 1;
}

.dashboard-info {
  display: none;
}

.dashboard-charts {
  margin-bottom: 20px;
}

.chart-card {
  margin-bottom: 20px;
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 500;
}

.chart-container {
  padding: 10px 0;
}

.table-card {
  margin-bottom: 20px;
}

.el-dropdown-link {
  cursor: pointer;
}

.url-copy-container {
  display: flex;
  align-items: center;
  padding: 0 5px;
  margin-top: 5px;
  overflow: hidden;
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
}

.url-input {
  flex: 1;
  height: 32px;
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 32px;
  color: #606266;
  white-space: nowrap;
  background-color: transparent;
}

.copy-btn {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 5px;
}

.copy-btn:hover {
  --el-button-hover-bg-color: #2cb144 !important;
  --el-button-hover-text-color: white !important;
  --el-button-hover-border-color: #2cb144 !important;
}

@media (width <= 768px) {
  .el-col {
    width: 100% !important;
  }
}
</style>
